<template>
  <Row>
    <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
      <Card>
        <div ref="doms" style="width:350px; height: 400px;margin:auto" />
      </Card>
    </Col>
  </Row>
</template>
<script  lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import type { PropType } from "vue";
import * as echarts from "echarts";
import "echarts-wordcloud";
import { Row, Col, Card } from "ant-design-vue";
import type { TypeItem } from './datas';
import { texts } from './datas';
export default defineComponent({
  name: "wordcloud",
  components:{
    Row,
    Col,
    Card,
  },
  props:{
    datas:{
      type: Array as PropType<Array<TypeItem>>,
    },
  },
  setup(props) {
    let doms = ref();
    onMounted(() => {
      let textData = props.datas ?? texts;  
      var chart = echarts.init(doms.value);
      chart.setOption({
        series: [
          {
            type: "wordCloud",
            shape: "triangle", //可选值：cardioid diamond triangle-forward triangle
            left: "center",
            top: "center",
            width: "70%",
            height: "80%",
            right: null,
            bottom: null,
            // 尺寸范围
            sizeRange: [12, 30],
            // 倾斜角度范围
            rotationRange: [0, 45],
            rotationStep: 45,
            gridSize: 8,
            drawOutOfBound: false,
            layoutAnimation: true,
            textStyle: {
              fontFamily: "sans-serif",
              fontWeight: "bold",
              color: function () {
                return ``;
              },
            },
            emphasis: {
              focus: "self",
              textStyle: {
                textShadowBlur: 10,
                textShadowColor: "#008c8c",
              },
            },
            data:textData,
          },
        ],
      });
    });
    return {
      doms,
    };
  },
});
</script>